<template>
  <div class="shop-detail">
    <v-header :bg="'tran'">
      <div class="nav-tab2"></div>
      <v-cart :isdark='false' :isshow="true"></v-cart>
    </v-header>
    <div class="s-infos">
      <img v-lazy="https(info.logourl)" alt="">
      <div class="s-show">
        <div class="s-vdo" v-if='info.videourl'>
          <video id="shopVideo" preload="auto" :class="{play:playing}" controls webkit-playsinline playsinline :src="info.videourl|https"></video>
          <i class="ico-vdo-play" @click="playVdo"></i>
        </div>
        <div class="s-info flex-between">
          <div class="s-info-l flex">
            <img v-lazy="https(info.headportraiturl)" @click='goInfo' alt="">
            <div>
              <p class="ellipsis">{{info.businessname}}</p>
              <p>
                <i class="ico-sp-glb tilt" v-if="info.isglobalpurchase"></i>
                <i :class="info.icoClass" class="tilt"></i>
              </p>
            </div>
          </div>
          <div class="s-info-r" @click="favShop">
            <div>
              <i :class="{'ico-fav-white':!info.isfavor,'ico-fav-white-act':info.isfavor}"></i>
              <span>{{info.isfavor?'已':''}}收藏</span>
            </div>
            <p class="font-price">{{info.favorcount>999?'999+':info.favorcount}}
              <span>粉丝</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <nav-bar :bars='bars' :iseq='false' :toggle='toggle'></nav-bar>
    <section class="s-index" v-show="barId=='index'" v-if="info.homecontenturl">
      <v-active :isin='true' :id='info.id'></v-active>
    </section>
    <section class="s-list" v-if="barId=='list'">
      <ProductSearchList :styleType='1'> </ProductSearchList>
    </section>
    <section class="s-newpublish flex-wrap" v-show="barId=='newpublish'">
      <div v-for="item in newpublish" :key='item.id'>
        <product-unit :product-item="item" :product-type='7' :qzone='insq'></product-unit>
      </div>
      <p class='no-more'>已经到底啦~~</p>
    </section>
    <section class="s-discount" v-if="barId=='discount'">
      <shop-discount></shop-discount>
    </section>
    <section class="s-coupon" v-show="barId=='coupon'">
      <CouponUnit v-for="c in coupons" :key="c.id" :cous="c" :couType="3" :show-period='true'></CouponUnit>
      <p class='no-more'>已经到底啦~~</p>
    </section>
  </div>
</template>
<script>
import { APP } from '../../../common/util'
import { BusinessDetail, GetCoupon } from '../../../common/api/business'
import { FavorBusiness } from '../../../common/api/userFavor'
import NavBar from '../../../common/templates/NavBar'
import ProductSearchList from '../../templates/ProductSearchList'
import ProductUnit from '../../templates/ProductUnit'
import CouponUnit from '../../templates/CouponUnit'
import ShopDiscount from './ShopDiscount'
import Active from '../../Active'
import { mapGetters } from 'vuex'

var fullScreen = false
export default {
  components: { NavBar, ProductSearchList, ProductUnit, CouponUnit, ShopDiscount, 'v-active': Active },
  data() {
    return {
      barId: '',
      bars: [],
      info: {},
      newpublish: [],
      coupons: [],
      playing: false,
      couponCenter:false
    }
  },
  mounted() {
    let _ = this
    _.$store.state.mall.isShopSearchPage = false
    // this.$store.dispatch('resetOption', 3)
    _.$store.dispatch('setFilteType', 3)
    _.$store.dispatch('setShopFixedMenu', false)
    _.$store.dispatch('setShopTopNavi', false)
    // 这个id是给shopfilter用的s
    _.$store.state.product.shopRouteId = _.$route.params.id
    if(_.$route.query.couponCenter)_.couponCenter = true
    else _.couponCenter = false
    _.getShop()
  },
  computed: {
    ...mapGetters({ insq: 'insq', user: 'userInfo' })
  },
  methods: {
    getShop() {
      let _ = this
      let businessid = _.$route.params.id
      BusinessDetail({ businessid })
        .then(res => {
          console.log('BusinessDetail res', res)
          if (res && res.info) {
            let info = res.info
            switch (info.type) {
              case 1: // 官方店
                info.icoClass = 'ico-sp-official'
                break
              case 2: // 买手店
                info.icoClass = 'ico-sp-buy'
                break
              case 3: // 专营店
                info.icoClass = 'ico-sp-store'
                break
            }

            _.info = info

            _.initShare({
              type: res.share.type,
              info: {
                title: res.share.title || info.businessname,
                img: res.share.icon || info.logourl,
                desc: res.share.content || APP.shareData.shopDetail.desc
              }
            })

            let bars = []
            if (info.homecontenturl) bars.push({ title: '首页', id: 'index' })
            bars.push({ title: '全部商品', id: 'list' })
            if (res.newpublish && res.newpublish.length > 0) {
              bars.push({ title: '新品', id: 'newpublish' })
              _.newpublish = res.newpublish
            }
            if (res.isdiscount) bars.push({ title: '折扣', id: 'discount' })
            if (res.iscoupon) {
              bars.push({ title: '优惠券', id: 'coupon',Active:!!_.couponCenter })
            }
            // if (res.coupons && res.coupons.length > 0) {
            //   bars.push({ title: '优惠券', id: 'coupon' })
            //   _.coupons = res.coupons
            // }
            _.bars = bars
            _.barId = bars[0].id
          } else _.toast('店铺信息加载失败')
        })
        .catch(e => {
          _.toast('数据加载失败：' + e.msg)
          console.error('BusinessDetail req error', e)
        })
    },
    favShop() {
      let _ = this
      if (!_.user.token) {
        _.$router.push('/login')
        return
      }
      let isfav = _.info.isfavor
      let businessid = _.$route.params.id
      FavorBusiness({ businessid })
        .then(res => {
          _.toast(`${isfav ? '取消' : ''}收藏成功`)
          _.info.isfavor = !isfav
          isfav ? _.info.favorcount-- : _.info.favorcount++
        })
        .catch(e => {
          _.toast(`${isfav ? '取消' : ''}收藏失败：` + e.msg)
          console.error('FavorBusiness error', e)
        })
    },
    goInfo() {
      // console.log('go info')
      let _ = this
      window.localStorage.setItem('SHOP_INFO', JSON.stringify(_.info))
      _.$router.push('/shop/info/' + _.info.id)
    },
    getCoupon() {
      let _ = this
      let businessid = _.$route.params.id
      GetCoupon(businessid)
        .then(res => {
          _.coupons = res.coupons
        })
        .catch(e => {
          _.toast('优惠券加载失败：' + e.msg)
          console.log('GetCoupon error', e)
        })
    },
    toggle(i, idx) {
      // console.log('toggle nav bar', i, idx)
      window.scrollTo(0, 0)
      let _ = this
      _.barId = i.id
      switch (i.id) {
        case 'coupon':
          if (!(_.coupons && _.coupons.length > 0)) _.getCoupon()
          break
      }
    },
    playVdo() {
      let _ = this
      let video = window.document.getElementById('shopVideo')
      video.play()
      _.playing = true

      const fullscreenchange = () => {
        fullScreen = !fullScreen
        if (!fullScreen && video.paused) _.playing = false
      }
      ;['webkitfullscreenchange', 'mozfullscreenchange', 'fullscreenchange', 'MSFullscreenChange'].forEach(i => {
        video['on' + i] = fullscreenchange
      })

      video.onpause = () => {
        // for (const k in video) {
        //   const i = video[k]
        //   console.log(k, i)
        // }
        if (!fullScreen) _.playing = false
      }
    }
  }
}
</script>
<style scoped>
.shop-detail {
  margin-top: 0 !important;
}
.s-newpublish {
  padding: 5px 5px 0;
}
.s-newpublish > div {
  width: 50%;
  padding-left: 5px;
  padding-right: 5px;
}
.s-coupon {
  color: #fff;
}
.s-infos {
  position: relative;
  min-height: 56.2vw;
}
.s-infos > img {
  display: block;
}
.s-show {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.s-info {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-bottom: 5px;
  color: #fff;
}
.s-info-l {
  max-width: 72%;
  padding-left: 20px;
}
.s-info-l > img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 5px;
}
.s-info-l .ellipsis {
  max-width: 170px;
  font-weight: 600;
}
.s-info-r {
  width: 70px;
  text-align: center;
  font-size: 12px;
}
.s-info-r > div {
  background-color: rgba(255, 199, 0, 0.8);
  border-radius: 12px 0 0 0;
  line-height: 22px;
}
.s-info-r > p {
  background-color: rgba(51, 51, 51, 0.8);
  line-height: 16px;
  font-size: 13px;
}
.s-info-r > p span {
  font-size: 10px;
}

.s-vdo {
  width: 45px;
  height: 45px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -23px 0 0 -23px;
}
.s-vdo video {
  width: 0;
  height: 0;
  visibility: hidden;
}
.s-vdo video.play {
  z-index: 999;
  visibility: visible;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: #000;
}
.s-vdo .ico-vdo-play {
  position: absolute;
  top: 0;
}
</style>

